[iOS 10][UIKit] 新しく加わった動的なアニメーション実装の方法とその周辺解説

iOS 10

#iPhone

#Swift

#UIKit

#iOS

田中賢治

2016.09.14

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

おばんです、仙台のイオンは店舗が大きかったのですが東京でイオンというと割と店舗が小さめであることに気付き、シティボーイになっちまった感を得ている田中です。

今回はUIKitに新しく加わったUIViewPropertyAnimatorとその周辺について説明していきます。

UIViewPropertyAnimatorが加わるとなにがよいのか

UIKitにおいてこれまで動的にアニメーションに変更を加えたりすることができませんでした。

例えば

開始したアニメーションを途中でアニメーションを止めて、またそこから再開する(start, pause, stopの制御)
開始したアニメーションの途中でユーザーのアクションに応じてアニメーションを変更する

などができませんでした。

そこで登場したのがUIViewPropertyAnimatorです。
今回は前者のstart, pause, restartをするサンプルを取り上げて、stopの処理も含めて説明していきます。
完成品は以下の動画のようなもの。

実装方法

以下のような方法で実装が可能です。
コードの解説はコメントアウトにて記載。

import UIKit

class ViewController: UIViewController {

    var subview: UIView!
    var animator: UIViewPropertyAnimator!

    override func viewDidLoad() {
        super.viewDidLoad()

        // subviewの設定
        subview = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
        subview.center.x = view.center.x
        subview.center.y = 50
        subview.layer.cornerRadius = 25
        subview.backgroundColor = UIColor.cyan
        view.addSubview(subview)

        // アニメーションの設定
        // タイミングカーブを.linearに設定
        let timing = UICubicTimingParameters(animationCurve: .linear)

        // アニメーションの時間を2秒、タイミングパラメータに上で定義したtimingをセット
        animator = UIViewPropertyAnimator(duration: 2.0, timingParameters: timing)
        // アニメーションを追加
        animator.addAnimations {
            self.subview.center.y += 100
        }
    }

    @IBAction func tapStartButton(_ sender: AnyObject) {
        // アニメーションスタート
        animator.startAnimation()
    }

    @IBAction func tapPauseButton(_ sender: AnyObject) {
        // アニメーションポーズ
        animator.pauseAnimation()
    }

    @IBAction func tapStopButton(_ sender: AnyObject) {
        // アニメーションストップ
        // trueだとanimatorはinactiveになる
        // falseだとanimatorはstoppedになる
        // アニメーションが自然に終わった場合はこのメソッドは呼ばれない
        animator.stopAnimation(false)
    }
}